<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//获取btn02
        var btn02 = document.getElementById("btn02");
        
        // 点击按钮以后，box1向右移动（left）
        btn01.onclick = function () {
          move(box1,800,10)
        }
        // 点击按钮以后，box1向左移动（left）
        btn02.onclick = function () {
          move(box1,0,10)
        }

			//尝试创建一个可以执行简单动画的函数
			/*
			 * 参数：
			 * 	obj:要执行动画的对象
			 * 	target:执行动画的目标位置
			 * 	speed:移动的速度(正数向右移动，负数向左移动)
			 */
      var timer = null
      function move (obj, target, speed) {
        // 打开计时器之前先清除之前所有的
        clearInterval(timer)
        // 获取元素现在的位置
        var current = parseInt(getStyle(obj,'left'))
        //判断速度的正负值
				//如果从0 向 800移动，则speed为正
        //如果从800向0移动，则speed为负
        if (current > target) {
          speed = -speed
        }

        //开启一个定时器，用来执行动画效果
        timer = setInterval(function() {
         //获取box1的原来的left值
          var oldValue = parseInt(getStyle(box1,'left'))
          var newValue = oldValue + speed

          //判断newValue是否大于800
					//从800 向 0移动
					//向左移动时，需要判断newValue是否小于target
          //向右移动时，需要判断newValue是否大于target
          if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
						newValue = target;
          }
          //将新值设置给box1
					obj.style.left = newValue + "px";
					
					//当元素移动到0px时，使其停止执行动画
					if(newValue == target){
						//达到目标，关闭定时器
						clearInterval(timer);
					}
        },30)
      }

			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
      function getStyle (obj, name) {
        if (window.getComputedStyle) {
          return getComputedStyle(obj,null)[name]
        } else {
          return obj.currentStyle[name]
        }
      }

			
      }
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box1向左移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
		
	</body>
</html>
